import React, { useState } from "react";
import "./Showimg.css";

export default function Showimg() {
	let [minimg, setMinimg] = useState([
		"/img/1.jpg",
		"/img/2.jpg",
		"/img/3.jpg",
		"/img/4.jpg",
		"/img/5.jpg",
	]);

	// 大图 对应的 小图 下标
	let [id, setId] = useState(0);

	//创建鼠标移入小图
	let change = (i) => {
		return (e) => {
			setId(i);
		};
	};

	return (
		<div className="showimg">
			<div className="maximg">
				<img src={minimg[id]} alt="" />
			</div>
			<div className="minimg">
				<ul>
					{minimg.map((item, index) => {
						return (
							<li key={index} onMouseOver={change(index)}>
								<img
									className={index === id ? "imgactive" : ""}
									src={item}
									alt=""
								/>
							</li>
						);
					})}
				</ul>
			</div>
		</div>
	);
}
